#{extends 'main.html' /}
<!DOCTYPE html>
<html>
<head>

<style type="text/css">
#container1{
margin:0 auto;
padding: 0 auto;
width:720px;
background-color: #F1F1F1;

}
</style>
 <!-- Jquery slider -->

    <title>Movie Page</title>
    <link href="public/themes/4/js-image-slider.css" rel="stylesheet" type="text/css" />
    <script src="public/themes/4/js-image-slider.js" type="text/javascript"></script>
    <link href="public/stylesheets/generic.css" rel="stylesheet" type="text/css" />
    
    
    <!-- Box Office -->
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
 
	<title>Google Feed Loader Example #1</title> 
	
	<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript">
    google.load("feeds", "1");
    google.setOnLoadCallback(showFeed);
 
    function showFeed() {
      var feed = new google.feeds.Feed("http://www.rottentomatoes.com/syndication/rss/top_movies.xml");
	  //var feed = new google.feeds.Feed("http://rss.hurriyet.com.tr/TvRehberi.aspx");
      feed.setNumEntries(10);
      feed.load(function(result) {
        if (!result.error) {
		  var container = document.getElementById("headlines1");
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            var tr = document.createElement("tr");
            tr.innerHTML = '<h3><a href="' + entry.link + '">' + entry.title + '</a> </h3>';
            //li.innerHTML += '<p>' + entry.contentSnippet + '</p>';
            container.appendChild(tr);
          }
        } else {
			var container = document.getElementById("headlines1");
		    container.innerHTML = '<tr><a href="http://sitepoint.com">Get your geek news fix at SitePoint</a></tr>';
		}
      });
    }
     </script>
	
   <!-- Categories -->
   
   
   <!-- include the Tools -->
	<script src="public/javascripts/jquery.js"></script>

	<!-- standalone page styling (can be removed) -->
	<link rel="stylesheet" type="text/css" href="public/stylesheets/standalo.css"/>	


	<!-- accordion styling -->	
	<link rel="stylesheet" type="text/css" href="public/stylesheets/tabs-acc.css"/> 


<meta http-equiv="Content-Type" content="text/html;charset=windows-1252">
   
   <!-- RSS News -->
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
 
	<title>Google Feed Loader Example #1</title> 
	
	<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript">
    google.load("feeds", "1");
    google.setOnLoadCallback(showFeed);
 
    function showFeed() {
      var feed = new google.feeds.Feed("http://www.rottentomatoes.com/syndication/rss/top_news.xml");
	  feed.setNumEntries(10);
      feed.load(function(result) {
        if (!result.error) {
		  var container = document.getElementById("headlines");
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            var tr = document.createElement("tr");
            tr.innerHTML = '<h3><a href="' + entry.link + '">' + entry.title + '</a> </h3>';
            tr.innerHTML += '<p>' + entry.contentSnippet + '</p>';
            tr.innerHTML +='<p> -------------------------------------------------</p>';
            container.appendChild(tr);
          }
        } else {
			var container = document.getElementById("headlines");
		    container.innerHTML = '<tr><a href="http://sitepoint.com">Get your geek news fix at SitePoint</a></tr>';
		}
      });
    }
    </script>
	
   
    
</head>

<body style="width:850px;">
   
    <div id="container1">
    
    <div id="sliderFrame" align="center">
        <div id="slider">
            <a href="#"><img src="public/images/image1.jpg"></a>
            <a href="#"><img src="public/images/image2.jpg"></a>
            <a href="#"><img src="public/images/image3.jpg"></a>
            <a href="#"><img src="public/images/image4.jpg"></a>
            <a href="#"><img src="public/images/image5.jpg"></a>
            <a href="#"><img src="public/images/image6.jpg"></a>
            <a href="#"><img src="public/images/image7.jpg"></a>
            <a href="#"><img src="public/images/image8.jpg"></a>
            <a href="#"><img src="public/images/image9.jpg"></a>
            
        </div>
        <!--Custom navigation buttons on both sides-->
        <div class="group1-Wrapper">
            <a onclick="imageSlider.previous()" class="group1-Prev"></a>
            <a onclick="imageSlider.next()" class="group1-Next"></a>
        </div>
        <!--thumbnails-->
        <div id="thumbs">
            <!-- navigation buttons in the thumbnails bar -->
            <a onclick="imageSlider.previous()" class="group2-Prev"></a>
            <a id='auto' onclick="switchAutoAdvance()"></a>
            <a onclick="imageSlider.next()" class="group2-Next" style="margin-right:30px;"></a>
           
      
    </div>
</div>

  
    <script type="text/javascript">
        //The following script is for the group 2 navigation buttons.
        function switchAutoAdvance() {
            imageSlider.switchAuto();
            switchPlayPauseClass();
        }
        function switchPlayPauseClass() {
            var auto = document.getElementById('auto');
            var isAutoPlay = imageSlider.getAuto();
            auto.className = isAutoPlay ? "group2-Pause" : "group2-Play";
            auto.title = isAutoPlay ? "Pause" : "Play";
        }
        switchPlayPauseClass();
    </script>
    
  
    <!-- Box Office -->
    
   <h2  style="color:black"><pre>       Categories       			Box Office</pre></h2>
   <div style="width:720px; height: 300px;">
   <div id="boxofficecontainer" style="width:250px; border-radius:20px 20px ; float:right; height: 260px;   border: 2px solid #4d4e50;
box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .5);	 background-color: #ffffc0;  margin: 0 0 0 0;" >
	<div id="boxoffice" style=" overflow: auto; float: right; width: 240px; height: 240px;" >
	<table style="color:black;" id="headlines1" style="width:400px;"></table>
	</div>
	 </div> 
 
 
 
 
 
 
 <!--categories -->
 
<div id="accordion" style="width: 350px; float:left;">

	<h2 class="current">ACTION</h2>
	 
	<div class="pane" style="display:block">
	
		<a href="#"><img src="public/images/categoryimages/image1.jpg" alt="JavaScript tools"  margin:0 15px 15px 0" /></a>
		<a href="#"><img src="public/images/categoryimages/image2.jpg" alt="JavaScript tools"  margin:0 15px 15px 0" /></a>
		<a href="#"><img src="public/images/categoryimages/image3.jpg" alt="JavaScript tools"  margin:0 15px 15px 0" /></a>
		<a href="#"><img src="public/images/categoryimages/image4.jpg" alt="JavaScript tools"  margin:0 15px 15px 0" /></a>
		
		
		
		
		
	</div>
	
	<h2>ANIMATION</h2>
	
	<div class="pane">
		<a href="#"><img src="public/images/categoryimages/image5.jpg" alt="JavaScript tools"  margin:0 15px 15px 0" /></a>
		<a href="#"><img src="public/images/categoryimages/image6.jpg" alt="JavaScript tools"  margin:0 15px 15px 0" /></a>
		<a href="#"><img src="public/images/categoryimages/image7.jpg" alt="JavaScript tools"  margin:0 15px 15px 0" /></a>
		<a href="#"><img src="public/images/categoryimages/image8.jpg" alt="JavaScript tools"  margin:0 15px 15px 0" /></a>
		<a href="#"><img src="public/images/categoryimages/image9.jpg" alt="JavaScript tools"  margin:0 15px 15px 0" /></a>
		
		
	</div>

	<h2>COMEDY</h2>
	
	<div class="pane">
		<a href="#"><img src="public/images/categoryimages/image10.jpg" alt="JavaScript tools"  margin:0 15px 15px 0" /></a>
		<a href="#"><img src="public/images/categoryimages/image11.jpg" alt="JavaScript tools"  margin:0 15px 15px 0" /></a>
		<a href="#"><img src="public/images/categoryimages/image12.jpg" alt="JavaScript tools"  margin:0 15px 15px 0" /></a>
		<a href="#"><img src="public/images/categoryimages/image13.jpg" alt="JavaScript tools"  margin:0 15px 15px 0" /></a>
		<a href="#"><img src="public/images/categoryimages/image14.jpg" alt="JavaScript tools"  margin:0 15px 15px 0" /></a>
		<a href="#"><img src="public/images/categoryimages/image15.jpg" alt="JavaScript tools"  margin:0 15px 15px 0" /></a>
	</div>	

	<h2>FANTASTIC</h2>
	
	<div class="pane">
			
		
		<a href="#"><img src="public/images/categoryimages/image16.jpg" alt="JavaScript tools"  margin:0 15px 15px 0" /></a>
		<a href="#"><img src="public/images/categoryimages/image17.jpg" alt="JavaScript tools"  margin:0 15px 15px 0" /></a>
		<a href="#"><img src="public/images/categoryimages/image18.jpg" alt="JavaScript tools"  margin:0 15px 15px 0" /></a>
		<a href="#"><img src="public/images/categoryimages/image19.jpg" alt="JavaScript tools"  margin:0 15px 15px 0" /></a>
		
	</div>

</div>
</div>



<!-- RSS News  -->
 <!-- <h1><pre> Movies News</pre></h1> -->
   <div id="news" style=" width:725px; height:210px; border-radius:20px 20px ; border: 2px solid #4d4e50; background-color: #DEBCDF;"">
   
  <div style="width:720px; height: 200px; overflow: auto; margin: 0 auto;">
  <h3 style="color:black";><pre> Movies News</pre></h3>
	<table style="color:black" id="headlines"></table> 
 </div>  
  </div>
  
  
  
  
<!-- activate tabs with JavaScript -->
<script>
$(function() { 

$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
});
</script>



<!-- activate tabs with JavaScript -->
<script>

// add new effect to the tabs
$.tools.tabs.addEffect("slide", function(i, done) {

	// 1. upon hiding, the active pane has a ruby background color
	this.getPanes().slideUp().css({backgroundColor: "#f6f6f6"});

	// 2. after a pane is revealed, its background is set to its original color (transparent)
	this.getPanes().eq(i).slideDown(function()  {
		$(this).css({backgroundColor: 'transparent'});

		// the supplied callback must be called after the effect has finished its job
		done.call();
	});
});
</script>

</div>
</body>
</html>
